<template>
    <div>
        <button v-for="(item, index) in data" :key="item.id" :class="[{ 'bg': item.cStatus }, 'demo', 'btn']"
            @click="handler(item.id, index)">
            {{ item.content }}
        </button>
    </div>
    <!-- <ul>
        <li v-for="item in list" :key="item.id">{{ item.title }}</li>
    </ul> -->
    <Son :fcurrrentPage="currrentPage"></Son>
</template>

<script setup>
import Son from './Son.vue';
import { ref, watchEffect } from 'vue'
import { nanoid } from 'nanoid';
// import axios from '../axios/axios.js';

const data = ref([
    {
        id: nanoid(5),
        content: '全部',
        cStatus: false
    },
    {
        id: nanoid(5),
        content: '精华',
        cStatus: false
    },
    {
        id: nanoid(5),
        content: '分享',
        cStatus: false
    },
    {
        id: nanoid(5),
        content: '问答',
        cStatus: false
    },
    {
        id: nanoid(5),
        content: '招聘',
        cStatus: false
    },
    {
        id: nanoid(5),
        content: '客户端测试',
        cStatus: false
    },
])
const currrentPage = ref(0);
// const list = ref([])

const handler = (id, index) => {
    // console.log(index);
    // console.log(id);
    // console.log(data.value);
    currrentPage.value = Number.parseInt(index)
    console.log(currrentPage.value);
    // data.value.forEach(item=>{
    //     if(item.id == id){
    //         item.cStatus = true
    //     }else{
    //         item.cStatus = false
    //     }
    // })
}
watchEffect(() => {
    data.value.forEach((item, index) => {
        if (index == currrentPage.value) {
            item.cStatus = true
        } else {
            item.cStatus = false
        }
    })
    // axios.get('https://cnodejs.org/api/v1/topics', {
    //     params: { limit: 6, page: currrentPage.value+1}
    // }).then(res => {
    //     // console.log('res.data.data=>', res.data.data);
    //     list.value = res.data.data
    // })
})
</script>

<style scoped>
.bg {
    background-color: #80bd01;
    color: #fff !important;
}

.demo {
    margin: 0 10px;
    color: #80bd01;
    padding: 3px 4px;
    border-radius: 3px;
}
</style>